// 先获取到dom元素
const loginA = document.querySelector('.login-a');// 登录盒子的 超链接
const registerA = document.querySelector('.register-a');// 注册盒子的 超链接

const registerBox = document.querySelector('.register');//注册盒子
const loginBox = document.querySelector('.login');//登录盒子

const loginForm = document.querySelector('.login form');//登录盒子的form标签
const registerForm = document.querySelector('.register form');//注册盒子的form标签



// 点击跳转到注册
loginA.addEventListener('click', function (e) {
    loginBox.style.display = 'none'
    registerBox.style.display = "block"
})

// 点击跳转到登录
registerA.addEventListener('click', function (e) {
    registerBox.style.display = 'none'
    loginBox.style.display = "block"
})


// 注册盒子的提交事件
registerForm.addEventListener('submit', async function (e) {
    // 取消默认行为
    e.preventDefault()

    // 先拿到 表单的2个数据
    const username = registerForm.querySelector('[name=username]').value.trim();
    const password = registerForm.querySelector('[name=password]').value.trim();

    //   非空效验
    if (!username || !password) {
        alert('请填写完整信息！！！')
        return
    }

    // 在静态页面的form标签里添加 autocomplete="off   可以关闭历史记录

    // 发数据
    const result = await axios({
        url: "/api/register",
        method: 'post',
        data: {
            username,
            password,
        }
    })
    console.log(result);

    if (result.data.code === 0) {
        // 好看的提示框
        toastr.success(result.data.message, '恭喜')
        setTimeout(() => {
            // 自动跳转到登录盒子
            registerA.click()

        }, 1500)

        // 将注册页面的账号设置到登录页面显示
        loginBox.querySelector('[name=username]').value = username;


    }



})

// 登录盒子的提交事件
loginForm.addEventListener('submit', async function (e) {

    // 取消默认行为
    e.preventDefault();

    // 先拿到 表单的2个数据
    const username = loginForm.querySelector('[name=username]').value.trim();
    const password = loginForm.querySelector('[name=password]').value.trim();

    // console.log(username, password);

    //   非空效验
    if (!username || !password) {
        alert('请填写完整信息！！！')
        return
    }

    // 发数据
    const result = await axios({
        url: "/api/login",
        method: 'post',
        data: {
            username,
            password,
        }
    })
    console.log(result);

    if (result.data.code === 0) {
        // 有好提示框
        toastr.success(result.data.message, '恭喜')

        // 储存token
        localStorage.setItem('keys', result.data.token)

        setTimeout(() => {
            //跳转页面
            location.href = 'index.html'

        }, 1500)

    }




})

